禁止浏览器打开控制台

出于安全等方面的考虑，可以禁止浏览器打开控制台

有以下几种方式：

禁止F12键

通过键盘事件判断键值===123时拦截即可

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
    if (event.keyCode = 123) {
        event.preventDefault(); // 阻止默认事件行为
        window.event.returnValue = false;
    }
}

禁止右键

右键有查看源代码和打开控制台功能，通过右键事件拦截即可

// 为右键添加自定义事件，可以禁用
window.oncontextmenu = function() {
    event.preventDefault(); // 阻止默认事件行为
    return false;
}

检查是否已打开控制台

通过上面的两种方式可以阻止新手打开控制台，但是还是有别的办法能打开：

1. 选中地址栏再按F12

2. ctrl+shift+i

3. 浏览器的菜单里找

4. 事先打开控制台再访问页面

5. 。。。

针对这些情况只能用定时器不断地检查是否打开了控制台，打开则刷新页面，达到无法正常使用的目的。

检查办法

1. 通过页面宽度

   这种如果控制台选择另开窗口的方式就无效了，所以也不贴代码了。

2. 通过设置对象的属性的getter方法

   当控制台在输出的某个对象时，是会去get对象属性的，因此会调用到属性的getter。

   function checkDebugByGetter () {
       var checkStatus;
       var element = document.createElement('any');
       element.__defineGetter__('id', function() {
           checkStatus = 'on';
       });
       var interval = setInterval(function() {
           checkStatus = 'off';
           console.log(element);
           console.clear();
           if (checkStatus === 'on') {
               clearInterval(interval)
               window.location.reload()
           }
       }, 1000)
   }
   

3. 通过debugger

   打开了控制台的情况下，代码有debugger时就会进入断点，但是还是可以选中dom的，要看还是看得到，不如刷新直接

   function checkDebugByDebugTime() {
       function testDebuger() {
           var d = new Date();
           debugger;
           if (new Date() - d > 10) {
               window.location.reload();
               return true;
           }
           return false;
       }
       function start() {
           while (testDebuger()) {
               testDebuger();
           }
       }
       if (!testDebuger()) {
           window.onblur = function () {
               setTimeout(function () {
                   start();
               }, 500)
           }
       }else {
           start();
       }
   }
   

禁用js的情况

可以通过禁用js跳过js的判断打开控制台，但是如今的项目绝大多数都是通过客户端渲染页面的，禁用js页面也就不会生效了，可以不用考虑。

最终源码

window.onkeydown = window.onkeyup = window.onkeypress = function (event) {
    // 判断是否按下F12，F12键码为123
    if (event.keyCode = 123) {
        event.preventDefault(); // 阻止默认事件行为
        window.event.returnValue = false;
    }
}
// 为右键添加自定义事件，可以禁用
window.oncontextmenu = function() {
    event.preventDefault(); // 阻止默认事件行为
    return false;
}
    
// 通过设置对象的属性的getter方法
// 原理：当控制台在输出的某个对象时，是会去get对象属性的，因此会调用到属性的getter。
function checkDebugByGetter () {
    var checkStatus;
    var element = document.createElement('any');
    element.__defineGetter__('id', function() {
        checkStatus = 'on';
    });
    var interval = setInterval(function() {
        checkStatus = 'off';
        console.log(element);
        console.clear();
        if (checkStatus === 'on') {
            clearInterval(interval)
            window.location.reload()
        }
    }, 1000)
}
checkDebugByGetter();